Dahili CSS, CSS'nin HTML belgesi içerisinde <style> etiketi kullanılarak tanımlanması yöntemidir. Bu yöntem, stil tanımlamalarının doğrudan HTML belgesinin <head> bölümüne yerleştirilmesini sağlar. Bu sayede, belirli bir sayfaya özgü stil tanımlamaları kolaylıkla yapılabilir.
Dahili CSS, inline CSS ve harici CSS ile birlikte CSS uygulama yöntemlerinden biridir. Her bir yöntemin kendine özgü avantaj ve dezavantajları bulunmaktadır. Dahili CSS, özellikle tek bir sayfaya özgü stil tanımlamaları için kullanışlıdır. Stiller, HTML belgesi içinde <style> etiketi ile tanımlanır ve bu etiket genellikle <head> bölümüne yerleştirilir.
Dahili CSS kullanmak için aşağıdaki adımlar izlenir:
<head> etiketi içerisinde <style> etiketini açın ve kapatın.<style> etiketi içerisinde CSS kurallarınızı tanımlayın.Örnek:
<!DOCTYPE html>
<html>
<head>
<title>Dahili CSS Örneği</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: darkgreen;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Dahili CSS Başlığı</h1>
<p>Bu bir paragraf örneğidir. Dahili CSS kullanılarak stillendirilmiştir.</p>
</body>
</html>
Aşağıda, farklı HTML elemanlarını stillendirmek için dahili CSS kullanımına dair çeşitli örnekler verilmiştir:
Örnek 1: Başlık ve Paragraf Stilleri
<!DOCTYPE html>
<html>
<head>
<title>Dahili CSS Başlık ve Paragraf</title>
<style>
h1 {
color: #333;
font-size: 2em;
text-align: center;
}
p {
color: #666;
font-size: 1.2em;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Hoş Geldiniz</h1>
<p>Bu sayfa, dahili CSS ile stilendirilmiş bir örnektir. Başlık ve paragraf stilleri `<style>` etiketi içinde tanımlanmıştır.</p>
</body>
</html>
Örnek 2: Liste Stilleri
<!DOCTYPE html>
<html>
<head>
<title>Dahili CSS Liste Stilleri</title>
<style>
ul {
list-style-type: square;
padding-left: 20px;
}
li {
color: #444;
font-size: 1em;
}
</style>
</head>
<body>
<ul>
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ul>
</body>
</html>
Örnek 3: Bağlantı Stilleri
<!DOCTYPE html>
<html>
<head>
<title>Dahili CSS Bağlantı Stilleri</title>
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.nedemek.page/">Nedemek.page</a>
</body>
</html>
| Özellik | Dahili CSS | Harici CSS |
|---|---|---|
| Kullanım | HTML belgesi içinde <style> etiketi ile | Ayrı bir CSS dosyası ile |
| Yeniden Kullanım | Sınırlı, sadece tanımlandığı sayfada geçerli | Yüksek, birden fazla sayfada kullanılabilir |
| Bakım | Zor, büyük projelerde karmaşık | Kolay, merkezi bir yerden stil yönetimi imkanı sağlar |
| Dosya Boyutu | HTML dosyasını büyütür | HTML dosyasını küçültür |
| Önbellekleme | Önbelleğe alınamaz | Tarayıcı tarafından önbelleğe alınabilir |
| Performans | Düşük, stil bilgisi her sayfada tekrar yüklenir | Yüksek, stil bilgisi önbellekten gelir |
Bu bilgiler, dahili CSS hakkında kapsamlı bir anlayış sağlamayı amaçlamaktadır. Daha fazla bilgi için, CSS ve diğer ilgili konuları araştırmaya devam edebilirsiniz.